<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery1.9/jquery-1.9.0.min.js"></script>
    <script>
        function doSome(){
            var p1=$("#f").serialize();
            console.log(p1);
            let p2=$("#f").serializeArray();
            // console.log(p2);
            var option={
                type:"post",
                url:"./service/selectProductById.php",
                data:p1,
                dataType:"json",
                success:function(result){
                    console.log(result);
                    $("#show").html(`
                        <div>商品编号：${result['p_id']}</div>
                        <div>商品名称：${result['p_name']}</div>
                        <div>商品价格：${result['p_price']}</div>
                        <div>商品单位：${result['p_unit']}</div>
                        <div>商品图片：${result.p_image_url}</div>
                    `);//
                },
                error:function(jqXHR,textStatus,errorThrown){
                    console.log(jqXHR);
                    console.log(textStatus);
                    console.log(errorThrown);
                },
                async:true,
                complete:function(jqXHR,textStatus){
                    console.log('查询完成');
                }
            }
            $.ajax(option);
        }
    </script>
</head>
<body>
    <form id="f">
        <div>
            <label>商品编号<input type="text" name="id" ></label>
        </div>
        <div>
            <label>商品名称<input type="text" name="name" ></label>
        </div>
    </form>
    <input type="button" value="ajax" onclick="doSome()">
    <div class="info" id="info">
        <h3>商品信息：</h3>
        <div id="show">

        </div>
    </div>
</body>
</html>